<template>
    <div class='container'>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="150px" class="demo-ruleForm">
        
        <div>
            <div class="container" style="margin-top:20px">
                <h3 style="margin-bottom: 20px">分级标准</h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="品名：" prop="productName">
                            <el-input placeholder="请输入内容" v-model="ruleForm.productName" style="width:300px">
                            </el-input>  
                        </el-form-item>
                        <el-form-item label="品级标准文件：" prop="standardsImg" style="width:500px">
                            <upload-img ref="uploadChang" :maxNum="1" :files='listUrl'></upload-img>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                       <el-form-item label="品级名称：" prop="productGrade">
                            <el-input placeholder="请输入内容"  v-model="ruleForm.productGrade" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>  
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </div>
        </el-form>
    </div>
</template>

<script>
import {grade_save,grade_findById,grade_update} from '@/request/api'
import uploadImg from '../../../common/uploadImg';
    export default {
        components: {
            uploadImg
        },
        data() {
            return {
                ifshow:true,
                imgurl:'',
                show:true,
                labelPosition:'right',
                showForm: false,
                ruleForm: {
                    type:'',
                    description:'',
                    checkName:'',
                    basis:[],
                    // files:''
                },
                listUrl:'',
                id:'',
                rules:{
                    // productName: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    standardsImg: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    productGrade: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                   
                }
            };
        },
        mounted(){
            this.id= this.$route.query.id
            this.ruleForm.type = this.$route.query.type
            console.log(this.ruleForm.type)
            if(this.id == undefined){
                
            }else{
                this.init()
            }
        },
        methods: {
            editback(){
                this.show = true 
                this.showForm = false
            },
            init(){
                grade_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
                    this.ruleForm.oldBasis = res.data.standardsImg
                    const arr = this.ruleForm.standardsImg.split(";")
                    if(arr == ""){

                    }else{
                        this.listUrl = arr.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
                })
            }, 
            backPage () {
                this.$router.go(-1);
                this.$store.commit('settype',this.ruleForm.type)
            },
        
            submitrule(formName){
                var imgurls = this.$refs.uploadChang.fileList
                var arr=""
                for(var i=0;i<imgurls.length;i++){
                    
                   arr += imgurls[i].name + ';'
                }
                var str = arr.substr(0,arr.length-1)
                this.ruleForm.standardsImg = str.substring(str.lastIndexOf("/")+1)
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        let formdata = new FormData()
                        var arr=""
                        for(var i=0;i<imgurls.length;i++){
                            if(imgurls[i].status != "success"){
                                formdata.append("files",imgurls[i].raw)
                            }
                        }
                        for(var a in this.ruleForm){
                            if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
                                this.ruleForm[a] = ""
                                formdata.append(a,'') 
                            }else{
                                formdata.append(a,this.ruleForm[a])
                            }
                        }
                        if(this.id == undefined){
                            grade_save(formdata).then((res)=>{
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration:1000
                                });
                                this.$router.go(-1)
                            })
                        }else{
                            grade_update(formdata).then((res)=>{
                                this.$notify({
                                    title: '提示',
                                    message: '修改成功',
                                    type: 'success',
                                    duration:1000
                                });
                                this.$router.go(-1)
                            })
                        }
                    }else{
                        return false
                    }
                })
            }
            
        }
    }
</script>
<style scoped lang="less">
.delete_btn{
    margin-left:6px;
}
</style>